.app-container{
	.font-base{
		font-size: $uni-font-size-base;
	}
	.font-sm{
		font-size: $uni-font-size-sm;
	}
	.flex{
		display: flex;
		&.items-center{
			align-items: center;
		}
		&.justify-between{
			justify-content: space-between;
		}
		.flex-1{
			flex: 1;
		}
	}
	.header{
		background: linear-gradient(93.34deg,#584b3f 9.98%,#000 60.62%,#322b24 116.4%);
		padding: 40rpx 20rpx 0;
		.basic-info{
			display: flex;
			color: $uni-text-color-inverse;
			align-items: center;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: $uni-border-radius-circle;
				border: 4rpx solid #fff;
			}
			.nickname{
				margin-left: 20rpx;
				font-weight: bold;
			}
		}
		.rule{
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
		}
		.level{
			background: linear-gradient(to right,#F9D9AC,#E9B46D);
			padding: 40rpx 20rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			margin-top: 40rpx;
			.btn{
				background-color: #724d2b;
				padding: 10rpx 30rpx;
				color: $uni-text-color-inverse;
				border-radius: 60rpx;
			}
		}
	}
	.main{
		padding: 0 20rpx;
		.box{
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			margin-top: 32rpx;
		}
		.box-1{
			padding: 40rpx 20rpx;
			.label{
				color: $uni-text-color-grey;
				margin-bottom: 6rpx;
			}
			.price{
				color: #f62c2c;
				font-weight: bold;
			}
			.value{
				font-weight: bold;
			}
			.btn{
				background: linear-gradient(to right,#F9D9AC,#E9B46D);
				padding: 20rpx 0;
				color: $uni-text-color-inverse;
				border-radius: 60rpx;
				color: #724d2b;
				font-weight: bold;
				font-size: $uni-font-size-base;
				text-align: center;
				margin: 0 40rpx;
			}
		}
		.box-2{
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: $uni-spacing-row-base;
			.box{
				padding: 20rpx;
			}
			.icon{
				width: 60rpx;
				height: 60rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-circle;
				}
			}
			.label{
				margin-bottom: 10rpx;
			}
			.value{
				color: $uni-text-color-grey;
			}
		}
		.box-3{
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: $uni-spacing-row-base;
			padding: 20rpx;
			.icon{
				width: 60rpx;
				height: 60rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}
			}
			.value{
				color: $uni-text-color-grey;
			}
		}
	}
}